/* Guestbook Page Layout */
.guestbook-page {
    padding: var(--space-xl) var(--space-m);
}

/* Guestbook Form */
.guestbook-form-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2.2rem 0 1.2rem 0;
}

.guestbook-form {
    background: linear-gradient(120deg, #fffbe6 80%, #b0a084 100%);
    border: 2.5px solid #b0a084;
    border-radius: 18px 18px 22px 22px/32px 32px 18px 18px;
    box-shadow: 0 4px 24px #b0a08433, 0 0 0 4px #fffbe6cc;
    padding: 2.2rem 2.2rem 1.2rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 340px;
    max-width: 98vw;
    position: relative;
    z-index: 2;
}

.guestbook-form .form-group label {
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: #3a5a6c;
    margin-bottom: 0.3em;
    letter-spacing: 1.2px;
}

.guestbook-form input,
.guestbook-form textarea {
    width: 100%;
    padding: 0.7em 1em;
    border: 2px solid #b0a084;
    border-radius: 12px;
    background: linear-gradient(120deg, #f7f1e3 80%, #fffbe6 100%);
    font-family: var(--font-title);
    font-size: 1.08rem;
    color: #222;
    box-shadow: 0 2px 8px #b0a08422;
    margin-top: 0.2em;
    transition: border-color 0.22s, box-shadow 0.22s;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus {
    border-color: #c23b23;
    box-shadow: 0 4px 16px #c23b2344;
    outline: none;
}

.submit-button {
    font-family: var(--font-title);
    font-size: 1.18rem;
    color: #fffbe6;
    background: linear-gradient(120deg, #c23b23 60%, #b0a084 100%);
    border: 2.5px solid #b0a084;
    border-radius: 18px 18px 22px 22px/32px 32px 18px 18px;
    box-shadow: 0 2px 12px #b0a08433, 0 0 0 4px #fffbe6cc;
    padding: 0.7em 2.2em;
    cursor: pointer;
    transition: box-shadow 0.28s, transform 0.22s cubic-bezier(.22,1.12,.56,1.08), color 0.22s, background 0.22s;
    margin-top: 0.8em;
    filter: drop-shadow(0 0 6px #b0a08444);
}

.submit-button:hover {
    color: var(--cinnabar-red);
    background: linear-gradient(120deg, #fffbe6 60%, #b0a084 100%);
    box-shadow: 0 8px 32px #c23b2344, 0 0 0 8px #b0a08455;
    transform: translateY(-4px) scale(1.07) rotate(-2deg);
    filter: drop-shadow(0 0 12px #c23b2344) brightness(1.10);
}

/* 飞鸽传书icon美化 */
.send-pigeon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1.2em auto 0 auto;
    padding: 0.5em 1.2em;
    border-radius: 18px;
    background: linear-gradient(120deg, #fffbe6 60%, #b0a084 100%);
    box-shadow: 0 2px 12px #b0a08433, 0 0 0 4px #fffbe6cc;
    border: 2.5px solid #b0a084;
    cursor: pointer;
    font-size: 1.2rem;
    color: #3a5a6c;
    font-family: var(--font-title);
    letter-spacing: 2px;
    transition: box-shadow 0.28s, transform 0.22s cubic-bezier(.22,1.12,.56,1.08), color 0.22s, background 0.22s;
    filter: drop-shadow(0 0 8px #b0a08444);
    position: relative;
    z-index: 2;
}

.send-pigeon:hover {
    color: var(--cinnabar-red);
    background: linear-gradient(120deg, #fffbe6 60%, #b0a084 100%);
    box-shadow: 0 8px 32px #c23b2344, 0 0 0 8px #b0a08455;
    transform: translateY(-4px) scale(1.07) rotate(-2deg);
    filter: drop-shadow(0 0 12px #c23b2344) brightness(1.10);
}

.send-pigeon .pigeon-icon {
    width: 2.2em;
    height: 2.2em;
    margin-right: 0.6em;
    filter: drop-shadow(0 0 8px #fffbe6cc) drop-shadow(0 0 4px #b0a08488);
    transition: filter 0.22s, transform 0.22s;
}

.send-pigeon:active .pigeon-icon {
    transform: scale(1.18) rotate(-12deg);
    filter: drop-shadow(0 0 24px #c23b23cc) brightness(1.12);
}

/* 信封滑动动画 */
@keyframes envelope-slide {
    0% { transform: translateX(-120%) scale(0.7) rotate(-18deg); opacity: 0; }
    60% { transform: translateX(8%) scale(1.08) rotate(4deg); opacity: 1; }
    100% { transform: translateX(0) scale(1) rotate(0); opacity: 1; }
}

.envelope-anim {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
    animation: envelope-slide 0.9s cubic-bezier(.22,1.12,.56,1.08);
}

/* 夜间模式适配 */
body.night-mode .guestbook-form {
    background: linear-gradient(120deg, #232323 80%, #3a5a6c 100%);
    border-color: #3a5a6c;
    box-shadow: 0 4px 24px #3a5a6c55, 0 0 0 4px #b0a08433;
}

body.night-mode .guestbook-form input,
body.night-mode .guestbook-form textarea {
    background: linear-gradient(120deg, #232323 80%, #3a5a6c 100%);
    color: #fffbe6;
    border-color: #3a5a6c;
}

body.night-mode .submit-button {
    background: linear-gradient(120deg, #3a5a6c 60%, #232323 100%);
    color: #b0a084;
    border-color: #b0a084;
}

body.night-mode .submit-button:hover {
    color: #fffbe6;
    background: linear-gradient(120deg, #b0a084 60%, #3a5a6c 100%);
}

body.night-mode .send-pigeon {
    background: linear-gradient(120deg, #232323 60%, #3a5a6c 100%);
    color: #b0a084;
    border-color: #b0a084;
}

body.night-mode .send-pigeon:hover {
    color: #fffbe6;
    background: linear-gradient(120deg, #b0a084 60%, #3a5a6c 100%);
}

/* Lantern Wall */
.lantern-wall-section {
    padding: var(--space-xl) 0;
    text-align: center;
}

.lantern-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}

.lantern {
    width: 250px;
    height: 350px;
    background-image: url('../assets/images/bg-lantern.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 30px; /* Adjust padding to fit inside the lantern image */
}

.lantern-content {
    font-family: var(--font-primary);
    color: var(--ink-black);
    text-align: center;
}

.message-text {
    font-size: 1.2rem;
    margin-bottom: var(--space-m);
}

.nickname-text {
    font-weight: bold;
}

.guestbook-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.2rem 1.2rem;
    justify-content: center;
    margin: 2.2rem auto 1.2rem auto;
    max-width: 900px;
    position: relative;
    z-index: 2;
}

.guestbook-item {
    min-width: 220px;
    max-width: 320px;
    background: linear-gradient(120deg, #fffbe6 80%, #f7f1e3 100%);
    border: 2.5px solid #b0a084;
    border-radius: 32px 32px 22px 22px/38px 38px 18px 18px;
    box-shadow: 0 4px 24px #b0a08433, 0 0 0 4px #fffbe6cc;
    padding: 1.2rem 1.4rem 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: box-shadow 0.28s, transform 0.22s cubic-bezier(.22,1.12,.56,1.08), border-color 0.22s, filter 0.22s;
    filter: drop-shadow(0 0 12px #b0a08488);
    margin-bottom: 0.8em;
    animation: lantern-swing 2.8s ease-in-out infinite alternate;
}

.guestbook-item:hover {
    box-shadow: 0 12px 48px #c23b2344, 0 0 0 8px #b0a08455;
    border-color: #c23b23;
    z-index: 2;
    transform: translateY(-6px) scale(1.04) rotate(-2deg);
    filter: drop-shadow(0 0 32px #c23b23cc) brightness(1.10);
}

@keyframes lantern-swing {
    0% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-4px); }
    100% { transform: rotate(-2deg) translateY(0); }
}

.guestbook-nickname {
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: #c23b23;
    margin-bottom: 0.5em;
    letter-spacing: 1.2px;
    text-shadow: 0 2px 0 #fffbe6, 0 0 8px #b0a08444;
    font-weight: bold;
    border-bottom: 2px dashed #b0a084;
    padding-bottom: 0.2em;
}

.guestbook-message {
    font-family: var(--font-sans);
    font-size: 1.08rem;
    color: #3a5a6c;
    text-align: center;
    line-height: 1.7;
    letter-spacing: 1.1px;
    text-shadow: 0 1px 0 #fffbe6;
}

body.night-mode .guestbook-item {
    background: linear-gradient(120deg, #232323 80%, #3a5a6c 100%);
    border-color: #3a5a6c;
    box-shadow: 0 4px 24px #3a5a6c55, 0 0 0 4px #b0a08433;
}

body.night-mode .guestbook-item:hover {
    box-shadow: 0 12px 48px #fffbe644, 0 0 0 8px #b0a08499;
    border-color: #fffbe6;
}

body.night-mode .guestbook-nickname {
    color: #b0a084;
    text-shadow: 0 2px 0 #232323, 0 0 8px #fffbe644;
    border-bottom: 2px dashed #3a5a6c;
}

body.night-mode .guestbook-message {
    color: #fffbe6;
    text-shadow: 0 1px 0 #3a5a6c;
} 